<template>
  <div>
    <el-card>
      <el-row>
        <!-- <el-col :span="11">
          <el-card>
            <el-tree
              :data="steel"
              :props="defaultProps"
              @node-click="handleNodeClick"
            ></el-tree>
          </el-card>
        </el-col> -->
        <!-- <el-col :span="12" :offset="1">
          <el-card>
            <el-row> -->
        <el-button
          type="success" round
          size="small"
          @click="addUser"
          class="mg20"
          v-if="rule"
          >添加用户</el-button
        >
      </el-row>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="userID" label="用户ID" align="center" 
          width="100">
        </el-table-column>
        <el-table-column prop="username" label="用户名" align="center" >
        </el-table-column>
        <el-table-column prop="roles" label="角色权限" align="center" >
        </el-table-column>
        <el-table-column prop="create_time" label="角色创建时间" align="center" >
        </el-table-column>
        <el-table-column prop="last_login_time" label="最后登录时间" align="center" >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="primary" size="small" @click="showUser(scope.row)"
              >查看</el-button
            > -->
            <el-button
              type="primary" 
              size="small"
              @click="editUser(scope.row)"
              v-if="rule"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="5"
        :pager-count="11"
        layout="prev, pager, next"
        :total="pagecount"
        @current-change="jupage"
        v-show="userAll"
      >
      </el-pagination>
      <!-- <el-pagination
        :page-size="5"
        :pager-count="11"
        layout="prev, pager, next"
        :total="steelSize"
        @current-change="steeljupage"
        v-show="steelAll"
      >
      </el-pagination>
      <el-pagination
        :page-size="5"
        :pager-count="11"
        layout="prev, pager, next"
        :total="prosize"
        @current-change="projupage"
        v-show="proAll"
      >
      </el-pagination> -->
    </el-card>
    <!-- </el-col>
      </el-row>
    </el-card> -->
    <!-- 添加用户 -->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名称">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="form.password"
            autocomplete="off"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份类型:">
          <el-select v-model="value" placeholder="请选择身份权限" class="mg20">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-tree
          :data="addTree"
          show-checkbox
          node-key="id"
          :default-expanded-keys="defaultExpandedKeys"
          ref="tree"
          highlight-current
          :props="defaultProps"
          :defaultCheckedKeys="addCheckedKeys"
        >
        </el-tree>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUser">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑用户 -->
    <el-dialog title="编辑用户" :visible.sync="exitDialogVisible">
      <el-form :model="exitfrom">
        <el-form-item label="用户名称">
          <el-input v-model="exitfrom.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="exitfrom.password"
            autocomplete="off"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份类型">
          <el-select v-model="value" placeholder="请选择身份权限" class="mg20">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-tree
          :data="addTree"
          show-checkbox
          node-key="id"
          ref="exitTree"
          highlight-current
          :props="defaultProps"
          :defaultCheckedKeys="exitDefaultCheckedKeys"
        >
        </el-tree>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exitDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="exitSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查看用户 -->
    <el-dialog title="查看用户" :visible.sync="showDialogVisible">
      <el-form :model="showform">
        <el-form-item label="用户名称">
          <el-input
            v-model="showform.username"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-tree
          :data="addTree"
          show-checkbox
          node-key="id"
          ref="showtree"
          highlight-current
          :props="defaultProps"
          :defaultCheckedKeys="defaultCheckedKeys"
        >
        </el-tree>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api";
export default {
  data() {
    return {
      options: [
        {
          value: "admin",
          label: "管理员",
        },
        {
          value: "user",
          label: "用户",
        },
      ],
      value: "",
      rule: false,
      prosize: 0,
      proAll: false,
      userAll: false,
      id: 0,
      steelAll: false,
      defaultExpandedKeys: [],
      defaultCheckedKeys: [],
      addCheckedKeys: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      steel: [],
      tableData: [],
      dialogFormVisible: false,
      form: {
        username: "",
        password: "",
        proList: [],
        roles: "",
      },
      formLabelWidth: "300px",
      addTree: [],
      showDialogVisible: false,
      exitDialogVisible: false,
      pagecount: 0,
      steelSize: 0,
      showform: {},
      nowpage: 0,
      exitfrom: {
        id: "",
        username: "",
        password: "",
        proList: [],
        roles: "",
      },
      exitDefaultCheckedKeys: [],
    };
  },
  watch: {
    dialogFormVisible(newval) {
      if (!newval) {
        this.addCheckedKeys = [];
      }
    },
  },
  methods: {
    async jupage(val) {
      this.proAll = false;
      this.userAll = true;
      this.steelAll = false;
      this.tableData = [];
      this.nowpage = val;
      let arr = {
        size: 5,
        page: val ? val : 1,
      };
      let res = await api.userinfo.findUserall(arr);
      let result = res.data;
      if (result.data.length === 0) {
        this.$message({
          message: "暂无用户信息",
          type: "warning",
        });
      } else {
        this.pagecount = result.total;
        for (let i = 0; i < result.data.length; i++) {
          if (result.data[i]["rule"] === "admin") {
            result.data[i]["roles"] = "管理员";
          } else if (result.data[i]["rule"] === "user") {
            result.data[i]["roles"] = "普通用户";
          }
          this.tableData.push(result.data[i]);
        }
      }
    },
    async handleNodeClick(data) {
      this.tableData = [];
      this.id = data.id;
      if (data.key) {
        //子节点
        this.projupage();
      } else {
        //父节点
        this.steeljupage();
      }
    },
    //查询全部钢厂
    async getinfo() {
      let _self = this;
      let data = [];
      try {
        let res = await api.steelInfo.getsteelinfo();
        let result = res.data.data;
        for (let i = 0; i < result.length; i++) {
          data.push({
            label: result[i].factoryName,
            id: result[i].id,
          });
        }
        this.steel = data;
        this.gettree();
      } catch (error) {
        _self.$message({
          message: "服务器错误",
          type: "warning",
        });
      }
    },
    async gettree() {
      let res = await api.getProdinfo.getProinfoall();
      console.log("===", res);
      let result = res.data.data;
      let data = [];
      for (let i = 0; i < this.steel.length; i++) {
        for (let j = 0; j < result.length; j++) {
          if (this.steel[i].id === result[j].proFactoryId) {
            data.push({
              id: result[j].id,
              label: result[j].proName,
              key: "child",
            });
          }
        }
        this.$set(this.steel[i], "children", data);
        data = [];
      }
      this.addTree = JSON.parse(JSON.stringify(this.steel));
    },
    //添加·用户信息
    addUser() {
      this.dialogFormVisible = true;
      this.form = {
        username: "",
        password: "",
        proList: [],
        roles: "",
      };
    },
    async saveUser() {
      let data = this.$refs.tree.getCheckedNodes();
      for (let i = 0; i < data.length; i++) {
        if (data[i].key) {
          this.form.proList.push({
            id: data[i].id,
          });
        }
      }
      this.form.roles = this.value;
      let userInfo = {
        data: this.form,
      };
      if (userInfo.data.password === "" && userInfo.data.username === "") {
        this.$message({
          message: "用户名与密码为必填选项",
          type: "warning",
        });
        return;
      } else if (userInfo.data.roles === "") {
        this.$message({
          message: "请选择权限",
          type: "warning",
        });
        return;
      }
      let res = await api.userinfo.adduser(userInfo);
      if (typeof res.data === "string") {
        this.$message({
          message: "用户已经存在",
          type: "warning",
        });
        return;
      }
      if (res.status === 200) {
        if (res.data.msg === "success") {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.jupage();
        } else {
          this.$message({
            message: "信息有误，请重新输入",
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "服务器错误",
          type: "warning",
        });
      }
      this.dialogFormVisible = false;
    },
    // async gettree(){
    // 	let res = await api.userinfo.gettree();
    // }
    //编辑用户
    editUser(data) {
      this.exitDialogVisible = true;
      let arr = [];
      this.exitfrom.username = data.username;
      this.exitfrom.password = data.password;
      this.value = data.role;
      this.exitfrom.id = data.userID;
      // for (let i = 0; i < data.proList.length; i++) {
      //   arr.push(data.proList[i].id);
      // }
      // this.exitDefaultCheckedKeys = arr;
    },
    async exitSubmit() {
      //上传
      let nodeall = this.$refs.exitTree.getCheckedNodes();
      for (let i = 0; i < nodeall.length; i++) {
        if (nodeall[i].key) {
          this.exitfrom.proList.push({
            id: nodeall[i].id,
          });
        }
      }
      this.exitfrom.roles = this.value;
      let userInfo = {
        data: this.exitfrom,
      };
      if (userInfo.data.password === null && userInfo.data.username === null) {
        this.$message({
          message: "用户名与密码为必填选项",
          type: "warning",
        });
        return;
      }
      if (userInfo.data.roles === null) {
        this.$message({
          message: "请选择权限",
          type: "warning",
        });
        return;
      }
      let res = await api.userinfo.edituser(userInfo);
      if (res.status === 200) {
        if (res.data.msg === "success") {
          this.$message({
            message: "编辑成功",
            type: "success",
          });
          this.jupage();
        } else {
          this.$message({
            message: "信息有误，请重新输入",
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "服务器错误",
          type: "warning",
        });
      }
      this.exitDialogVisible = false;
    },
    //查看用户
    async showUser(val) {
      this.showDialogVisible = true;
      let data = {
        id: val.id,
      };
      let res = await api.userinfo.getuserinfo(data);
      this.showform.username = res.data.username;
      this.defaultCheckedKeys = res.data.proList;
    },
    async steeljupage(val) {
      this.tableData = [];
      this.steelAll = true;
      this.proAll = false;
      this.userAll = false;
      let arr = {
        id: this.id,
        size: 5,
        page: val ? val : 1,
      };
      let res = await api.steelInfo.getSteeluser(arr);
      if (typeof res.data.data === "string") {
        this.$message({
          message: "暂无用户信息",
          type: "warning",
        });
      } else {
        let result = res.data.data;
        this.steelSize = result.total;
        for (let i = 0; i < result.data.length; i++) {
          this.tableData.push(result.data[i]);
        }
      }
    },
    async projupage(val) {
      this.tableData = [];
      this.steelAll = false;
      this.proAll = true;
      this.userAll = false;
      let arr = {
        id: this.id,
        size: 5,
        page: val ? val : 1,
      };
      let res = await api.steelInfo.getProuser(arr);
      if (res.data.data.data.length === 0) {
        this.$message({
          message: "暂无用户信息",
          type: "warning",
        });
      } else {
        let result = res.data.data;
        this.prosize = result.total;
        for (let i = 0; i < result.data.length; i++) {
          this.tableData.push(result.data[i]);
        }
      }
    },
  },
  created() {
    // this.getinfo();
    this.jupage();
    if (localStorage.getItem("rule") == "admin") {
      this.rule = true;
    }
  },
};
</script>

<style>
.mg20 {
  margin-bottom: 20px;
}
</style>
